<template>
    <div class="user-chat-list-item">
        <img :src="avatarUrl" alt="头像">
        <div class="nickname">
            {{ nickname ? nickname : username }}
        </div>

    </div>
</template>

<script setup lang="ts">
    import defaultAvatar from '@/assets/images/default_avatar.jpeg'
    import { defineProps, ref, onMounted, watchEffect, computed } from 'vue'
    import { getUsersInfoByUID } from '@/api/user'
    const props = defineProps(['uid'])
    const username = ref(''), nickname = ref(''), avatar_path = ref('')
    const fetchUID = async () => {
        const res = await getUsersInfoByUID({ uid: props.uid })
        if (res.data.code === 0) {
            username.value = res.data.data.username
            nickname.value = res.data.data.nickname
            avatar_path.value = res.data.data.avatar_path
        } else {
            console.log(res.data.msg, 'uid:', props.uid)
        }
    }

    const avatarUrl = computed(() => {

        try {
            // 动态导入用户头像
            if (avatar_path.value)
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                return ((window as any).APP_CONFIG?.API_BASE_URL || '') + avatar_path.value
            return defaultAvatar
        } catch (err) {
            console.error('头像加载失败:', err)
            return defaultAvatar // 加载失败时显示默认头像
        }

    })

    watchEffect(() => {
        fetchUID()
    })
    onMounted(() => {
        fetchUID()

    })

</script>

<style lang="less" scoped>
    * {
        padding: 0;
        margin: 0;
        line-height: 1;
    }

    .user-chat-list-item {
        display: flex;
        height: 50px;
        width: 100%;
        align-items: center;
        // justify-content: space-between;
        padding: 8px 8px;



        img {
            height: 100%;
            border-radius: 50%;
            margin: 0 10px 0 0;
        }

        .nickname {
            font-size: small;
            overflow: hidden;
            text-overflow: ellipsis;
        }




    }
</style>